<script>
import TopCeiling from "@/views/home/components/TopCeiling.vue";
import FooterPage from "@/views/home/components/footerPage.vue";
import moment from 'moment';
import {details, review} from "@/API/http";

export default {
  name: "detailsPage",
  components: {FooterPage, TopCeiling},
  data(){
    return{
      // 课程
      course:[],
      reviews:[],
      comments: [],
      submitting: false,
      value: '',
      likes: 0,
      dislikes: 0,
      action: null,
      moment,
    }
  }, methods: {
    callback(key) {
      console.log(key);
    },
    handleSubmit() {
      if (!this.value) {
        return;
      }

      this.submitting = true;

      setTimeout(() => {
        this.submitting = false;
        this.comments = [
          {
            author: 'Han Solo',
            avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
            content: this.value,
            datetime: moment().fromNow(),
          },
          ...this.comments,
        ];
        this.value = '';
      }, 1000);
    },
    handleChange(e) {
      this.value = e.target.value;
    },
    like() {
      this.likes = 1;
      this.dislikes = 0;
      this.action = 'liked';
    },
    dislike() {
      this.likes = 0;
      this.dislikes = 1;
      this.action = 'disliked';
    },

  },
  created() {
    details(this.$route.query.id).then((res) => {
      // console.log(res)
      this.course=res.data
      // console.log(this.course)
    }),
    review(this.$route.query.id).then((res) => {
      this.reviews = res.rows
      // console.log(this.reviews[0].user)
    })
  }

}
</script>

<template>

  <div class="body">
    <TopCeiling style="background: white"></TopCeiling>
    <div>
      <div class="w">
        <div class="detaoilsBg">
          <div class="detaoilsTop">
            <p> <router-link to="/" style="color: white">首页</router-link>
              >视频详情</p>
          </div>
        </div>
        <div class="detaoilsBottom">
          <div class="detaoilsBottomBox">
            <div class="detaimgBox">
              <img :src="course.coverFileUrl" alt="">
            </div>
            <div>
              <h2>{{course.courseTitle}}</h2>
              <div style="display: flex;align-items: center;">
                <div><p style="margin: 0">累计{{course.participationsCount}}人学习</p></div>
                <div style="margin-left: 15px"><a-rate :default-value="5" disabled /></div>
              </div>

              <div>
                <p style="color: #42b983;font-size: 22px;font-weight: bold" v-if="course.isFree==='1'">免费</p>
                <div v-else-if="course.isDiscount==='1'">
                  <b style="margin-right: 10px;font-size: 22px">&yen;{{course.discountPrice}}</b>
                  <del>&yen;{{course.coursePrice}}</del>
                  <div class="juhui">限时钜惠</div>
                </div>
                <b v-else> &yen;{{course.coursePrice}}</b>
              </div>
              <div class="detaBtn">
                <div class="TVBtn">观看视频</div>
                <div class="shopBtn">加入购物车</div>
              </div>
            </div>
          </div>
        </div>
        <div style="background: white;margin: 20px auto; width: 90%;border-radius: 15px">
          <div class="detaoilsTab-box">
            <a-tabs default-active-key="1" @change="callback">
              <a-tab-pane key="1" tab="课程描述">
                <div style="padding: 10px" v-html="course.courseDetail"></div>
              </a-tab-pane>
              <a-tab-pane key="2" tab="目录" force-render>
                <div class="directoryBox">
                  <div class="directoryText" v-for="(item,index) in course.sections" :key="index">
                    <div>
                      <div><h2>{{index+1}}.&nbsp;&nbsp;&nbsp;&nbsp;{{item.sectionName}}</h2></div>
                      <div class="load">下载</div>
                    </div>
                    <div class="directoryNum" v-for="(item1,index1) in item.subSections" :key="index1">
                      <p>{{index+1}}-{{index1+1}}&nbsp;&nbsp;&nbsp;&nbsp;{{item1.sectionName}}</p>
                    </div>
                  </div>

                </div>
              </a-tab-pane>
              <a-tab-pane key="3" tab="评论">
                <div class="review">
                  <a-list
                      v-if="comments.length"
                      :data-source="comments"
                      :header="`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`"
                      item-layout="horizontal"
                  >
                    <a-list-item slot="renderItem" slot-scope="item">
                      <a-comment
                          :author="item.author"
                          :avatar="item.avatar"
                          :content="item.content"
                          :datetime="item.datetime"
                      />
                    </a-list-item>
                  </a-list>
                  <a-comment>
                    <a-avatar
                        slot="avatar"
                        src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                        alt="Han Solo"
                    />
                    <div slot="content">
                      <a-form-item>
                        <a-textarea :rows="4" :value="value" @change="handleChange" placeholder="请您发表对课程的评价" />
                      </a-form-item>
                      <a-form-item style="text-align: right">
                        <a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit" >
                          发表评论
                        </a-button>
                      </a-form-item>
                    </div>
                  </a-comment>
                  <div v-for="(item,index) in reviews" :key="index">
                    <a-comment>
                      <a slot="author">{{item.user.nickname}}</a>
                      <a-avatar
                          slot="avatar"
                          :src="item.user.avatarUrl"
                          alt="Han Solo"
                      />
                      <p slot="content" style="text-align: left">
                        {{item.commentContent}}
                      </p>
                      <a-tooltip slot="datetime" :title="moment().format('YYYY-MM-DD HH:mm:ss')">
                        <span>{{ moment().fromNow() }}</span>
                      </a-tooltip>
                    </a-comment>
                  </div>

                  <a-comment>
                    <template slot="actions">
      <span key="comment-basic-like">
        <a-tooltip title="Like">
          <a-icon type="like" :theme="action === 'liked' ? 'filled' : 'outlined'" @click="like" />
        </a-tooltip>
        <span style="padding-left: '8px';cursor: 'auto'">
          {{ likes }}
        </span>
      </span>
                      <span key="comment-basic-dislike">
        <a-tooltip title="Dislike">
          <a-icon
              type="dislike"
              :theme="action === 'disliked' ? 'filled' : 'outlined'"
              @click="dislike"
          />
        </a-tooltip>
        <span style="padding-left: '8px';cursor: 'auto'">
          {{ dislikes }}
        </span>
      </span>
                      <span key="comment-basic-reply-to">Reply to</span>
                    </template>
<!--                    <a slot="author">Han Solo</a>-->
<!--                    <a-avatar-->
<!--                        slot="avatar"-->
<!--                        src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"-->
<!--                        alt="Han Solo"-->
<!--                    />-->
<!--                    <p slot="content">-->
<!--                      We supply a series of design principles, practical patterns and high quality design resources-->
<!--                      (Sketch and Axure), to help people create their product prototypes beautifully and-->
<!--                      efficiently.-->
<!--                    </p>-->
<!--                    <a-tooltip slot="datetime" :title="moment().format('YYYY-MM-DD HH:mm:ss')">-->
<!--                      <span>{{ moment().fromNow() }}</span>-->
<!--                    </a-tooltip>-->
                  </a-comment>
                </div>
              </a-tab-pane>
            </a-tabs>
          </div>
        </div>
      </div>
    </div>
    <footer-page class="footePage"></footer-page>
  </div>
</template>

<style scoped lang="less">
:deep(.ant-input-group){
  //height: 100%;
  border-radius: 19px;
  overflow: hidden;
}
p{
  margin: 0 !important;
}
//限时钜惠
.juhui{
  font-size: 14px;
  text-align: center;
  width: 80px;
  color: white;
  border-radius: 5px;
  background-image: linear-gradient(to right top, #fe7f2d,#fa2864);
}
.body{
  height: 100%;
  background-color: #edf1f7;
}
.w{
  width: 1200px;
  margin: 0 auto;
}
//底部样式
.footePage{
  background: #0f141a;
}
//背景
.detaoilsBg{
  padding: 15px;
  height: 250px;
  background:#4b83fd ;
}
//这是左上角的文字
.detaoilsTop{
  padding: 15px;
  >p{
    color: white;
  }
}
.detaoilsBottom{
  margin: 0 auto;
  width: 90%;
  margin-top: -180px;
  border-radius:10px ;
  background: #fff;
  padding: 15px;
}
.detaoilsBottomBox{
  display: flex;
}
.detaimgBox{
  margin-right: 20px;
  overflow: hidden;
  border-radius: 15px;
  width: 300px;
  img{
    width: 100%;
  }
}
b{
  font-size: 18px;
  color: red;
}
.detaBtn{
  display: flex;
}
//底下两个按钮
.TVBtn{
  border-radius: 20px;
  padding: 5px 10px ;
  background: #42b983;
  color: white;
  margin-top: 15px;
}
.shopBtn{
  margin-top: 15px;
  margin-left: 15px;
  border-radius: 20px;
  padding: 5px 10px ;
  background: #ffe9e9 ;
  color: #f1534b;
}
//TAB切换
.detaoilsTab-box{
    text-align: center;
}
//目录盒子
.directoryBox{
  padding: 20px;
  text-align: left;
}
//目录的文本
.directoryText>div{
  display: flex;
  justify-content: space-between;
}
//下载
.load{
  height: 30px;
  color: white;
  padding: 5px 10px;
  background: #4b83fd;
}
//底下的目录
.directoryNum{
  padding-left: 10px;
  height: 45px;
  line-height: 45px;
  margin: 10px 0;
  background:#f2f2f2 ;
}
//评论
.review{
padding: 20px;
}
</style>